<template>
    <div class="preview-container">
      <h1>组件预览</h1>
      
      <section class="preview-section">
        <h2>Button 按钮</h2>
        <div class="component-demo">
          <MButton>默认按钮</MButton>
          <MButton type="primary">主要按钮</MButton>
          <MButton type="danger">危险按钮</MButton>
          <MButton disabled>禁用按钮</MButton>
        </div>
      </section>

      <section class="preview-section">
        <h2>RequestLogger 请求日志</h2>
        <div class="component-demo">
          <RequestLogger :environment="['xhr']" :show="false" h5Show="true" />
        </div>
      </section>
    </div>
  </template>
  
  <script>
  import { Button as MButton } from '../index.js'
  import RequestLogger from '../components/RequestLogger/index.vue'
  
  export default {
    name: 'ComponentPreview',
    components: {
      MButton,
      RequestLogger
    }
  }
  </script>
  
  <style scoped>
  .preview-container {
    padding: 20px;
  }
  
  .preview-section {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  
  .component-demo {
    display: flex;
    gap: 12px;
    margin-top: 16px;
  }
  
  h1 {
    margin-bottom: 24px;
  }
  
  h2 {
    margin-bottom: 16px;
  }
  </style>